<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,
			minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,
			body {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			#search {
				width: 980px;
				margin: 0 auto;
				background-color: white;
			}
			
			#search #title {
				width: 100%;
				height: 6vh;
				text-align: center;
				line-height: 6vh;
				font-size: 20px;
				box-shadow: 0 5px 5px #F2F2F2;
			}
			
			#title span {
				margin-left: 5%;
				color: #D01F3C;
			}
			
			#title a {
				float: right;
				margin-right: 2%;
				color: #D01F3C;
				text-decoration: none;
				font-size: 16px;
			}
			
			#container {
				margin-top: 12vh;
			}
			
			#first {
				width: 90%;
				height: 8vh;
				border: 1px solid #F2F2F2;
				line-height: 8vh;
				position: relative;
				margin: 0 auto;
			}
			
			#first img {
				width: 12px;
				position: absolute;
				top: 41%;
				left: 2%;
			}
			
			#first input {
				width: 95%;
				height: 6vh;
				border: none;
				outline: none;
				margin-left: 5%;
				
			}
			#first input::-webkit-input-placeholder{
				color: #999999;
			}
			
			button {
				width: 90%;
				height: 8vh;
				border: 1px solid #D01F3C;
				background: #D01F3C;
				color: white;
				font-size: 18px;
				line-height: 6vh;
				border-radius: 50px;
				display: block;
				margin: 0 auto;
				margin-top: 8vh;
				box-shadow: 0 5px 12px #F0F0F0;
				outline: none;
			}
			
			.order {
				height: 4vh;
				line-height: 4vh;
				text-align: center;
				margin-top: 8vh;
			}
			
			.order .line {
				display: inline-block;
				width: 42%;
				border-top: 1px solid #ccc;
			}
			
			.order .txt {
				color: #B2B2B2;
				vertical-align: middle;
			}
			
			.other img {
				width: 120px;
			}
			
			.other ul {
				width: 100%;
			}
			
			.other ul li {
				float: left;
				width: 32%;
				list-style: none;
				text-align: center;
				margin: 4vh auto;
			}
			a{
				text-decoration: none;
			}
			
			@media screen and (max-width:480px) {
				#search {
					width: 100%;
				}
				#title span {
					margin-left: 8%;
				}
				#first img {
					position: absolute;
					top: 40%;
					left: 3%;
				}
				#first input {
					margin-left: 9%;
				}
				.order .line {
					width: 35%;
				}
				.other img {
					width: 60%;
				}
			}
		</style>
	</head>

	<body>
		<div id="search">
			<div id="title">
				<span>登录</span>
				<a href="#">注册</a>
			</div>
			<div id="container">
				<div id="first">
					<img src="ios/icon_login_user_dis.png@2x.png" />
					<input type="text" placeholder="请输入手机号" />
				</div>
				<div id="first">
					<img src="ios/icon_login_suo_dis.png@2x.png" />
					<input type="text" placeholder="请输入密码" />
				</div>
				<div style="text-align: center; color: #B2B2B2;">
					<a href="我的.html"><button>登录</button></a>
					<p>忘记密码? 别慌</p>

				</div>
				<div class="order">
					<span class="line"></span>
					<span class="txt">第三方登录</span>
					<span class="line"></span>
				</div>
				<div class="other">
					<ul>
						<li>
							<img src="ios/icon_login_weixin_nor.pnng.png" />
						</li>
						<li>
							<img src="ios/icon_login_qq_nor.png.png" />
						</li>
						<li>
							<img src="ios/icon_login_weibo_nor.png.png" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>